import PropTypes from 'ant-design-vue/es/_util/vue-types'
import Option from './TagSelectOption.jsx'
import { filterEmpty } from '@/components/_util/util'

export default {
    Option,
    name: 'TagSelect',
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: {
        prefixCls: {
            type: String,
            default: 'ant-pro-tag-select'
        },
        defaultValue: {
            type: PropTypes.array,
            default: null
        },
        value: {
            type: PropTypes.array,
            default: null
        },
        expandable: {
            type: Boolean,
            default: false
        },
        hideCheckAll: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            expand: false,
            localCheckAll: false,
            items: this.getItemsKey(filterEmpty(this.$slots.default)),
            val: this.value || this.defaultValue || []
        }
    },
    methods: {
        onChange(checked) {
            const key = Object.keys(this.items).filter(key => key === checked.value)
            this.items[key] = checked.checked
            const bool = Object.values(this.items).lastIndexOf(false)
            if (bool === -1) {
                this.localCheckAll = true
            } else {
                this.localCheckAll = false
            }
        },
        onCheckAll(checked) {
            Object.keys(this.items).forEach(v => {
                this.items[v] = checked.checked
            })
            this.localCheckAll = checked.checked
        },
        getItemsKey(items) {
            const totalItem = {}
            items.forEach(item => {
                totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
            })
            return totalItem
        },
        // CheckAll Button
        renderCheckAll() {
            const props = {
                on: {
                    change: checked => {
                        this.onCheckAll(checked)
                        checked.value = 'total'
                        this.$emit('change', checked)
                    }
                }
            }
            const checkAllElement = (
                <Option key={'total'} checked={this.localCheckAll} {...props}>
                    All
                </Option>
            )
            return (!this.hideCheckAll && checkAllElement) || null
        },
        // expandable
        renderExpandable() {},
        // render option
        renderTags(items) {
            const listeners = {
                change: checked => {
                    this.onChange(checked)
                    this.$emit('change', checked)
                }
            }

            return items.map(vnode => {
                const options = vnode.componentOptions
                options.listeners = listeners
                return vnode
            })
        }
    },
    render() {
        const {
            $props: { prefixCls }
        } = this
        const classString = {
            [`${prefixCls}`]: true
        }
        const tagItems = filterEmpty(this.$slots.default)
        return (
            <div class={classString}>
                {this.renderCheckAll()}
                {this.renderTags(tagItems)}
            </div>
        )
    }
}
